<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="/js/vue.global.js"></script>
</head>
<body>
<div id="hello-vue">
    {{ message }}
</div>
<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')


</script>
<div id="app1"></div>
<script>
    const app = Vue.createApp({
        data(){
            return{count:4}
        }
    })

    const vm = app.mount("#app1")
    document.write(vm.$data.count) 
    document.write("<br>")
    document.write(vm.count)
    document.write("<br>")

    vm.count = 5
    document.write(vm.$data.count)
    document.write("<br>")

    vm.$data.count = 6
    document.write(vm.count)
</script>
<br>
<br>
<div id="app2"></div>
<script>
const app3 = Vue.createApp({
  data() {
    return { count: 10 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

const vm2 = app3.mount('#app2')

document.write(vm2.count)
document.write("<br>")
vm2.increment()

// document.write(vm2.count)
$('body').html($('body').html() + vm2.count);
</script>
</body>
</html>